<template>
  <div class="commodity">
    <div class="search">
      <div class="input">
        <el-input
          v-model="commonValue"
          placeholder="商品名称"
          clearable
        ></el-input>
      </div>
      <div class="input">
        <el-cascader
          v-model="commonCascaderValue"
          :options="commonCascaderOptions"
          @change="handleChange"
          clearable
          :props="optionsProps"
        ></el-cascader>
      </div>

      <div class="common-button" @click="searchHit">搜索</div>
      <div class="common-button" style="background: #999999"   @click="replacementHit">重置</div>

      <div class="common-button" @click="addHit" style="background: #2a82e4">
        新增福利
      </div>
    </div>

    <div class="lint"></div>

    <div class="table" v-loading="loading">
      <el-table
        :data="tableData"
        style="width: 100%"
        :default-sort="{ prop: 'price0', order: 'descending' }"
        border
        :header-cell-style="{
          color: '#333333',
          backgroundColor: '#f3f3f3',
        }"
      >
        <el-table-column prop="goodName" label="商品名称" width="300">
        </el-table-column>
        <el-table-column prop="" label="商品图">
          <template slot-scope="scope">
            <img class="imgs" :src="scope.row.goodIcon" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="welfareGoodClassifyName" label="商品分类">
        </el-table-column>
        <el-table-column prop="welfareGoodPrice" label="参考价（元）" sortable>
        </el-table-column>
        <el-table-column prop="userNum" label="被选人数"> </el-table-column>

        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <div class="operation">
              <div class="list" @click.prevent="detailsHit(scope.row)">
                详情
              </div>

              <div class="list" @click.prevent="editHit(scope.row)">编辑</div>

              <div class="list" @click.prevent="deleteHit(scope.row)">删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :total="tableDataTotal"
          :current-page="page"
        >
        </el-pagination>
      </div>
    </div>

    <!--删除弹出框-->
    <div class="delete">
      <el-dialog
        title="删除"
        :visible.sync="deleteVisible"
        :before-close="deleteClose"
      >
        <div class="delete-title">是否确认删除？</div>
        <div class="delete-attachment">
          <div class="list" @click="deleteClose">取消</div>
          <div class="list" @click="deleteConfirm">确定</div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { welfareGoodList, welfareClassifyGoodList, welfareGoodListDelete } from "@/api/welfare";

export default {
  data() {
    return {
      commonValue: "",
      commonCascaderOptions: [],
      optionsProps: {
        value: 'welfareGoodClassifyId',
        label: 'welfareGoodClassifyName'
      },
      commonCascaderValue: "",
      commonCascaderIndex: 0,
      //-------------
      page: 1,
      limit: 10,
      tableData: [],
      tableDataTotal: 0,
      loading: false,
      commonObj: {},
      //-----------
      deleteVisible: false,
    };
  },
  created() {
    this.welfareGoodListMet();
    this.welfareClassifyGoodListMet()
  },

  methods: {
    welfareGoodListMet() {
      let params = {
        goodName: this.commonValue,
        welfareGoodClassifyId: this.commonCascaderValue,
        welfareGoodLabelId: "",
        orderType: "",
        orderBy: "",
        pageSize: this.limit,
        pageNo: this.page,
      };

      welfareGoodList(params).then((res) => {
        if (res.errorCode == null) {
          res.resultData.welfareGoodList.forEach((item, index) => {
            item.welfareGoodPrice = Number(item.welfareGoodPrice / 100);
          });

          this.tableData = res.resultData.welfareGoodList;
          this.tableDataTotal = res.resultData.totalNum;
          this.loading = false;
        }
      });
    },

    welfareClassifyGoodListMet() {
       let params = {
        welfareGoodClassifyType: 0,
        pageSize: 99999,
        pageNo: 1,
      };

      welfareClassifyGoodList(params).then((res) => {
        if (res.errorCode == null) {
          this.commonCascaderOptions = res.resultData.classifyList;
          this.loading = false;
        }
      });
    },
    //-------
    searchHit() {
      this.loading = true;
      this.welfareGoodListMet();
    },
    replacementHit() {
      this.commonValue = "";
      this.commonCascaderValue = "";

      this.page = 1
      this.loading = true;
      this.welfareGoodListMet();
    },
    //------------------------
    handleChange(value) {
      console.log(value);
    },
    //-------------
    addHit() {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }
      this.$router.push({
        path: "/welfare/receive/receive-commodity-add",
        query: {
          soucre: 0,
        },
      });
    },
    detailsHit(item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }
      this.$router.push({
        path: "/welfare/receive/receive-commodity-add",
        query: {
          soucre: 1,
          id: item.welfareGoodId,
        },
      });
    },
    editHit(item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }
      this.$router.push({
        path: "/welfare/receive/receive-commodity-add",
        query: {
          soucre: 0,
          id: item.welfareGoodId,
        },
      });
    },
    //-------------------------------------------------
    deleteHit(item) {
      if (this.$store.state.premissions.infoRouterShow == false) {
        this.$message.error("暂无权限，请联系管理员开通");
        return;
      }

      this.commonObj = item;
      this.deleteVisible = true;
    },
    deleteClose() {
      this.deleteVisible = false;
    },
    deleteConfirm() {
      let params = this.commonObj.welfareGoodId;

      welfareGoodListDelete(params).then((res) => {
        if (res.errorCode == null) {
          this.deleteVisible = false;
          this.$message.success("删除成功！");
          this.loading = true;
          this.welfareGoodListMet();
        }
      });
    },

    //-------------------------------------------------
    handleSizeChange(val) {
      this.limit = val;
      this.loading = true;
      this.welfareGoodListMet();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.loading = true;
      this.welfareGoodListMet();
    },
  },
};
</script>

<style lang="less" scoped>
@import url("@/assets/css/common.less");

.commodity {
  .search {
    display: flex;
    align-items: center;
    .input {
      margin-right: 10px;

      /deep/ .el-input {
        width: 250px;
      }
    }

    .common-button {
      padding: 9px 20px;
      box-sizing: border-box;
      border-radius: 5px;
      background: #2a82e4;
      font-size: 14px;
      color: #fff;
      margin-left: 20px;
      cursor: pointer;
    }

    .common-button:last-child {
      background: #999999;
    }
  }

  .lint {
    margin: 10px 0;
    width: 100%;
    height: 1px;
    background: #ccc;
  }

  .table {
  }
}
</style>